<template>
  <van-field
    :label="titleText(options, item)"
    :name="item.itemTitle"
    :required="item.isRequired === 'Y'"
    :rules="[
      { required: item.isRequired === 'Y', message: '请选择' + item.itemTitle },
    ]"
    label-width="33rem"
  >
    <template #input>
      <p v-if="options.showDesc" class="desc f12 mb10">
        {{ options.description }}
      </p>
      <van-radio-group
        v-model="item.value"
        :disabled="type === 'view'"
        direction="vertical"
        @change="onChange"
      >
        <template v-for="radio in item.itemOptResList" :key="radio.optionName">
          <template v-if="radio.show || radio.show === undefined">
            <van-radio :name="radio.optionName"
            >{{ radio.optionName }}
            </van-radio>
            <input
              v-if="radio?.isOther === 'Y'"
              v-model="radio.otherValue"
              :disabled="type === 'view'"
              class="other_input"
            />
          </template>
        </template>
      </van-radio-group>
    </template>
  </van-field>
</template>

<script setup>
import { titleText } from "@/utils/common.js";


//defineOptions({ name: "H5Radio" });

const { item, type } = defineProps(["item", "type"]);
const emits = defineEmits(["change"]);
const { options } = JSON.parse(item.vformJson);

// 传递值改变后
const onChange = () => emits("change", item);
</script>

<style scoped>
.other_input {
  border: 1px solid var(--van-gray-4);
  height: 3rem;
}

.van-radio {
  margin-bottom: 5px !important;
}
</style>